import * as echarts from '../../ec-canvas/echarts'


// 时间刻度数组数据
const dateArr = () => {
    let arr = [],
        timeScale = ''
    for (let i = 1; i <= 24; i++) {
        timeScale = `${i}`.padStart(2, '0') + ':00'
        arr.push(timeScale)
    }
    return arr
}

Component({
    properties: {
        cdate: {
            type: Object,
            value: []
        }
    },
    data: {
        chartDate: [],
        ec: {}
    },
    // 监听数据变化
    observers: {
        "cdate": function (idate) {
            this.setData({
                chartDate: idate,
                ec: {
                    onInit: function (canvas, width, height, dpr) {
                        const initChart = echarts.init(canvas, null, {
                            width: width,
                            height: height,
                            devicePixelRatio: dpr
                        });
                        initChart.setOption({
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [{   // 时间刻度
                                type: 'category',
                                data: dateArr(),
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }],
                            yAxis: [{
                                type: 'value'
                            }],
                            series: [{   // 时间段数据分布占比
                                name: '次数',
                                type: 'bar',
                                barWidth: '60%',
                                data: idate.series
                            }]
                        });
                        canvas.setChart(initChart);
                        return initChart
                    }
                }
            })
        }
    },
    // 组建方法列表
    methods: {

    }
})